<style>
<!--
.initPad {
	padding: 12em;
}
#projectSearch {
	text-align: center;
}
#projectSearchDiv {
	width:80%;
	margin-top: 1.5em;
	margin-left: 10%;
	padding: 0.4em;
	clear: both;
	border-bottom :2px;
	border-bottom-style: groove;
}
#resultDiv {
	margin-top: 2em;
	margin-left: 0.5 em;
}

.estateSet {
	border:1px;
	border-style:inset;
	border-top :thin;
	border-left :thin;
	padding: 0.6em;
	margin-top: 0.5em;
	margin-left: 0.5em;
}
.resultTitle {
	font-size: 1.2em;
}
.resultBrief {
	padding-top: 0.3em;
	margin-left: 1em;
	font-size: 0.8em;
}
-->
</style>
<form id="projectSearch" class="ui-corner-all"  action="javascript:submit(this);"  >
<div id="projectSearchDiv" class="ui-state-highlight ui-corner-all" >

	<label><select name="estate_type" class="selectInput specDiv" style="padding:2px; margin:2px; width:150px">
                                		<option value="-1">Search For</option>
                                		<option value="project" >Project</option>
                                		<option value="property">Property</option>
                        			</select></label>
	<label><select id="state" name="state" style="padding:2px; margin:2px; width:150px">
			<option></option>
			</select></label>
		<label><select id="district" name="district" disabled="disabled" style="padding:2px; margin:2px; width:150px">
			<option value="-1" >District/City</option>
			</select></label><br />
			<label><select name="category_id" class="selectInput specDiv" style="padding:2px; margin:2px 2px 2px 3px; width:150px">
        		<option value="-1">Estate Category</option>
        		<option value="RES" >Residential</option>
        		<option value="COM">Commercial</option>
        		<option value="IND">Industrial</option>
			</select></label>
			<label><select name="type_id" class="selectInput specDiv" disabled="disabled" style="padding:2px; margin:2px; width:150px">
						<option value="-1">Types</option>
					</select>
			</label>
		<label><input name="price" id="price" size="10" maxlength="10" value=":approx Price" style="padding:2px; margin:2px; width:145px" /></label>
		
</div>
			<button type="submit">Search</button>
			<button type="reset" value="reset">Reset</button>
</form>
<div class="initPad" ></div>
<div id="resultDiv" style="display: none; " >
</div>
<script>
var urlFillState = "<? echo $this->url(array('module'=>'default','controller' => 'search','action' => 'fillstate'))?>";
var urlFillDistrict = "<? echo $this->url(array('module'=>'default','controller' => 'search','action' => 'filldistrict'))?>";
var urlSearchResult = "<? echo $this->url(array('module'=>'default','controller' => 'search','action' => 'result'))?>";
var estateTypes = {};
estateTypes.RES = {FLAT:'Flat',VILLA:'Villa',PLOT:'Plot',BNGLO:'Banglow',KOTHI:'Kothi'};
estateTypes.COM = {PLOT:'Plot',SHOP:'Shop',SROOM:'Showroom',CSPACE:'Commercial Space',CLAND:'Commercial Land'};
estateTypes.IND = {ILAND:'Industrial Land',SITE:'Site'};

$(document).ready(function(){
    $.ajax({
        url : urlFillState,
        dataType : 'json',
        success: function(jStates){
        	var selectOptionString = '<option value ="-1">States</option>';
    		$.each(jStates, function (index, states) {
    			selectOptionString += '<option value ="'+states.state+'">'+states.state+'</option>';
    		});
            $('#state').html(selectOptionString);
       },
       error: function(event) {
            alert(event.responseText);
       }
    });

    $('#state').change(function(){
        var state = $(this).val();
        $.ajax({
            url : urlFillDistrict,
            dataType : 'json',
            data : {state : state },
            success: function(jDistrict){
            	var selectOptionString = '<option value ="-1">District/City</option>';
    			$.each(jDistrict, function (index, district) {
    				selectOptionString += '<option value ="'+district.district+'">'+district.district+'</option>';
    			});
                $('#district').html(selectOptionString).attr('disabled','');
           },
           error: function(event) {
                alert(event.responseText);
           }
        });

    });


    $(':input[name="category_id"]').bind('change',function() {
        updatePTypes($(this));
    });
});//End ajax call.


function updatePTypes(categoryElem) {
    pType = categoryElem.val().toUpperCase();
    switch (pType) {
			case 'RES' :
			case 'COM' :
			case 'IND' :
  			var selectString = '';
  			$.each(estateTypes[pType], function (index, name) {
  				selectString += '<option value ="'+index+'">'+name+'</option>';
  			});
  			
  			categoryElem.parent().next()
  						.find(':input[name="type_id"]')
  						.html(selectString)
  						.attr('disabled','');
			break;
		default :
          console.log('pType :"'+pType+'" is not in cases.');
			break;
	}
}
function searchSubmit(query) {
    $.ajax({
        url : urlSearchResult,
        data : query,
        datatype : 'html',
        success: function(hResult){
            $('#resultDiv').html(hResult).slideDown();
            $('.estateSet').addClass('ui-state-default ui-corner-all');
            $('.initPad').removeClass('initPad');
            window.location.search = $.param(formData);
        },
            error: function(response) {
          	  $('#errorBox').text(response.responseText).parent().show();
                console.log(response);
                }
            });
}
if (window.location.search) {
	var query = window.location.search.substring(1,window.location.search.length);
	searchSubmit(query);
}
function submit() {
	formData = getValues('#projectSearch');
	window.location.search = $.param(formData);
}

function getValues(formId) {
    var formData = {}; 
    $(formId).find(':input')
    		.not(':input[value^="-1"],:input[value^=":"],button[type="reset"]')
    		.each(function(){ 
    			formData[this.name] = this.value; 
        });
	return formData;
}






</script>